<template>
  <div class="personalCenter-container">
    <!-- 标题 -->
    <module-title :title="moduleTitle"></module-title>

    <el-card>
      <el-form
        ref="feedbackForm"
        :rules="feedbackRules"
        :model="addForm"
        label-width="90px"
      >
        <el-form-item label="通知标题" prop="title">
          <el-input
            v-model="addForm.title"
            maxlength="30"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="通知内容" prop="text">
          <el-input
            v-model="addForm.text"
            type="textarea"
            maxlength="200"
            show-word-limit
            :rows="4"
            resize="none"
          ></el-input>
        </el-form-item>
        <el-form-item style="text-align: right">
          <el-button
            style="background-color: #1074fd;color: #ffffff;border: 0"
            @click="addFeedbackSubmit('feedbackForm')"
            >发布通知</el-button
          >
          <el-button @click="resetFrom('feedbackForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-table
      :data="feedBackList"
      v-loading="listLoading"
      :element-loading-text="elementLoadingText"
      border
      height="450"
      style="margin-top: 10px;width: 100%;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);"
    >
      <el-table-column
        show-overflow-tooltip
        prop="id"
        label="操作者"
        width="100"
      >
        <template>
          <span>{{ userInfo.nickName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="title"
        label="通知标题"
        width="150"
      >
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        prop="text"
        label="通知内容"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="150px"
        prop="createTime"
        label="发布时间"
      >
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span>{{ formDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        width="80"
        prop="enabled"
        label="状态"
      >
        <template slot-scope="scope">
          <span>{{ formEnabled(scope.row.enabled) }}</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="删除" width="80">
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="editMaterialStatus(scope.row)"
            style="color: red"
            >删除</el-button
          >
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip label="操作" width="80">
        <template slot-scope="scope">
          <el-button type="text" @click="operationMessage(scope.row)">{{
            scope.row.enabled ? "禁用" : "启用"
          }}</el-button>
        </template>
      </el-table-column>
      <el-table-column width="80" label="查看">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #1074fd"
            @click="handleClick(scope.row)"
            >查看</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <el-dialog width="40%" title="消息通知" :visible.sync="materialInfoDialog">
      <div style="line-height: 20px;margin-top: -10px">
        <div style="display: flex">
          <div style="min-width: 40px;">标题:</div>
          <div style="display: flex;flex-direction: column;font-size: 15px">
            <span>{{ materialInfo.name }}</span>
          </div>
        </div>
        <div style="display: flex;margin-top: 10px">
          <div style="min-width: 40px;">内容:</div>
          <div style="display: flex;flex-direction: column;">
            <span>{{ materialInfo.info }}</span>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import ModuleTitle from "@/components/content/ModuleTitle.vue";

import API from "@/network/api/messageApi";
import { createSign } from "@/utils/sign";

export default {
  name: "index",
  data() {
    return {
      moduleTitle: "消息通知",
      feedBackList: [],
      visible: false,
      materialInfoDialog: false,
      userInfo: {
        nickName: ""
      },
      listLoading: false,
      total: 0,
      selectRows: "",
      elementLoadingText: "正在加载...",
      publicForm: {
        timestamp: ""
      },
      queryForm: {
        currentOrganId: 0
      },
      addForm: {
        title: "",
        text: ""
      },
      requestParam: {
        msgId: 0,
        enabled: true
      },
      materialInfo: {},
      feedbackRules: {
        title: [
          {
            required: true,
            trigger: "blur",
            message: "请填写通知标题"
          }
        ],
        text: [
          {
            required: true,
            trigger: "blur",
            message: "请填写通知内容"
          }
        ]
      }
    };
  },
  created() {
    this.currentUserInfo = JSON.parse(localStorage.getItem("updateUserInfo"));
    this.userInfo.nickName = this.currentUserInfo.nickName;
    this.getMaterial();
  },
  methods: {
    async getMaterial() {
      this.listLoading = true;
      this.queryForm.currentOrganId = this.currentUserInfo.organId;
      this.publicForm.timestamp = new Date().getTime();
      if (this.publicForm.sign) {
        delete this.publicForm.sign;
      }
      this.publicForm.sign = createSign(
        JSON.stringify({ ...this.queryForm, ...this.publicForm })
      );
      const res = await API.getMessageList({
        ...this.queryForm,
        ...this.publicForm
      });
      const ref = res.data.data;
      if (JSON.stringify(this.feedBackList) !== "{}") {
        this.feedBackList = ref;
        // this.feedBackList.createTime = this.$moment(this.feedBackList.createTime).format('YYYY-MM-DD HH:mm:ss')
      }
      this.listLoading = false;
    },
    addFeedbackSubmit(refName) {
      this.$refs[refName].validate(async valid => {
        if (!valid) return;
        this.publicForm.timestamp = new Date().getTime();
        if (this.publicForm.sign) {
          delete this.publicForm.sign;
        }
        this.publicForm.sign = createSign(
          JSON.stringify({ ...this.addForm, ...this.publicForm })
        );
        await API.addMessage({ ...this.addForm, ...this.publicForm }).then(
          res => {
            if (res.data.code === 0) {
              this.$message("发送成功！", "success");
            } else {
              this.$message({
                type: "warning",
                message: res.data.msg
              });
            }
          }
        );
        this.$refs[refName].resetFields();
        this.getMaterial();
      });
    },
    async editMaterialStatus(row) {
      this.$confirm("确定要删除此条通知嘛？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          this.publicForm.timestamp = new Date().getTime();
          if (this.publicForm.sign) {
            delete this.publicForm.sign;
          }
          this.publicForm.sign = createSign(
            JSON.stringify({ msgId: row.msgId, ...this.publicForm })
          );
          await API.MaterialStatusUpload({
            msgId: row.msgId,
            ...this.publicForm
          }).then(res => {
            if (res.data.code === 0) {
              // row.status = '0'
              this.$message("删除成功！", "success");
            } else {
              this.$message({
                type: "warning",
                message: res.data.msg
              });
            }
          });
          this.getMaterial();
          // this.MaterialList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    // 启用|禁用消息
    async operationMessage(row) {
      this.$confirm(
        row.enabled ? "确定要禁用此条通知嘛？" : "确定要启用此条通知嘛？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      )
        .then(async () => {
          this.publicForm.timestamp = new Date().getTime();
          if (this.publicForm.sign) {
            delete this.publicForm.sign;
          }
          if (row.enabled) {
            row.organStatus = false;
          } else {
            row.organStatus = true;
          }
          this.requestParam.msgId = row.msgId;
          this.requestParam.enabled = Boolean(row.organStatus);
          this.publicForm.sign = createSign(
            JSON.stringify({ ...this.requestParam, ...this.publicForm })
          );
          await API.banMessage({
            ...this.requestParam,
            ...this.publicForm
          }).then(res => {
            if (res.data.code === 0) {
              // row.status = '0'
              this.$message("操作成功！", "success");
            } else {
              this.$message({
                type: "warning",
                message: res.data.msg
              });
            }
          });
          this.getMaterial();
          // this.MaterialList()
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消"
          });
        });
    },
    resetFrom(refName) {
      this.$refs[refName].resetFields();
    },
    formDate(createTime) {
      createTime = this.$moment(createTime).format("YYYY-MM-DD HH:mm:ss");
      return createTime;
    },
    formEnabled(enabled) {
      if (enabled) {
        enabled = "启用";
      } else {
        enabled = "禁用";
      }
      return enabled;
    },
    handleClick(row) {
      this.materialInfo.name = row.title;
      this.materialInfo.info = row.text;
      this.materialInfoDialog = true;
    }
  },
  components: {
    ModuleTitle
  }
};
</script>
<style scoped>
.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}
/deep/ .el-dialog__header {
  background-color: #d9d9d9;
}
</style>
